<template>
	<view class="login-bg">
		<view class="login-content">
			<view class="login-logo">
				<image src="@/static/images/login/logo.png" style="width: 158px;height: 38px;" mode="heightFix"></image>
			</view>
			<view class="login-center">
				<view class="login-input-li">
					<view class="login-input-title">
						用户ID/手机号/邮箱
					</view>
					<view class="login-input-out">
						<input class="login-input-inner" v-model="form.user_name"
							placeholder-style="color: #BFC7D5;font-size: 14px;" type="text" placeholder="请输入您的用户ID/手机号/邮箱"
							@confirm="loginSubmit">
					</view>
				</view>
				<view class="login-input-li">
					<view class="login-input-title">
						密码
					</view>
					<view class="login-input-out">
						<input class="login-input-inner" v-model="form.pass_word"
							placeholder-style="color: #BFC7D5;font-size: 14px;" :type="pwdType" placeholder="请输入您的用户密码"
							@confirm="loginSubmit">
						<image v-if="pwdType === 'password'" class="pwd-eyes-icon" mode="widthFix"
							src="@/static/images/login/close-eyes.png" @click="pwdTypeChange"></image>
						<image v-else src="@/static/images/login/open-eyes.png" mode="widthFix" class="pwd-eyes-icon"
							@click="pwdTypeChange"></image>
					</view>
				</view>
				<view class="login-btns">
					<view class="">
						<u-checkbox-group v-model="checkedVal" @change="changeChecked">
							<u-checkbox activeColor="#26bbff" labelColor="#979EAA" labelSize="14px" label="记住密码"
								name="1"></u-checkbox>
						</u-checkbox-group>
						</u-checkbox-group>
					</view>
					<u-button class="login-btn" 
					:style="{color:'#fff',fontSize:'14px',background:'#16b7ff',borderRadius:'5rpx',}"
					@click="loginSubmit">登 录</u-button>
				</view>
				<view class="login-register flex-between-nowrap">
					<u-button type="text" @click="goRegister" :style="{color:'#26bbff',fontSize:'14px'}">注册账号</u-button>
					<u-button type="text" @click="goRest" :style="{color:'#26bbff',fontSize:'14px'}">重置密码</u-button>
				</view>
			</view>
			<m-agree @changeAgree="changeAgree" :agree="isAgree" :styleObj="{marginLeft:'0px',marginTop:'50px'}"></m-agree>
		
		</view>
		<Footer classes="posab"></Footer>
	</view>
</template>

<script>
	import md5 from "@/js_sdk/js-md5/src/md5.js"

	import {
		Base64,
	} from "@/js_sdk/js-base64/base64.js"
	import {
		loginApp
	} from "@/common/api/login.js"
	import {
		getUserInfo
	} from "@/common/api/user.js"
	export default {
		data() {
			return {
				pwdType: 'password',
				checkedVal: [],
				form: {
					pass_word: '',
					user_name: ''
				},
				isAgree:uni.getStorageSync('loginAgree'),
				
			}
		},
		watch: {
			$route(to, from) {
				
				// console.log('路由变化了')
				// console.log(to);
				// console.log(from);
				if (to.path === '/') {
					
					this.getRemeberPwd()
				}
			},
		},
		onUnload() {
			document.onkeydown = null
		},
		mounted() {
			uni.setNavigationBarTitle({
				title:'登录' +'-宅小职'
			})
			this.getRemeberPwd()
			// #ifdef H5
			document.onkeydown = (event) => {
				var e = event || window.event
				if (e && e.keyCode == 13) { //回车键的键值为13
					this.loginSubmit()
				}
				
			};
			// #endif
		},
		methods: {
			changeAgree(val){
				this.isAgree = val.length?true:false
				uni.setStorageSync('loginAgree', this.isAgree)
			},
			goRegister(){
				this.utils.goPath('/pages/register/register')
			},
			goRest(){
				this.utils.goPath('/pages/forgetPwd/checkUser')
			},
			// 密码类型切换
			pwdTypeChange() {
				if (this.pwdType === 'password') {
					this.pwdType = 'text'
				} else {
					this.pwdType = 'password'
				}
			},
			// 是否记住密码
			getRemeberPwd() {
				// 获取用户信息
				uni.getStorage({
					key: 'rinfo',
					success: (res) => {
						if (res.data) {
							let rinfo = JSON.parse(Base64.decode(res.data))
							this.form.user_name = rinfo.user_name
							this.form.pass_word = rinfo.pass_word
							this.checkedVal = rinfo.checkedVal
						}
					}
				});
			},
			changeChecked(val) {},
			loginSubmit() {
				if(!this.isAgree){
					uni.showToast({
						title: '请勾选同意协议后再进行操作',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.form.user_name) {
					uni.showToast({
						title: '请输入用户ID/手机号',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (!this.form.pass_word) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
						duration: 2000
					})
					return
				}
				let data = {
					user_name: this.form.user_name,
					pass_word: this.form.pass_word
				}
				uni.showToast({
					title: '登录中...',
					icon: 'loading',
					duration: 300000
				})
				loginApp(data).then(result => {
					uni.hideToast()
					if (result.code === 200) {
						// 存贮用户信息及token
						let res = result.data.token
						let base64Info = res.split('.')[1]
						// let info = Base64.decode(base64Info)
						// uni.setStorageSync('LoginInfo', info)
						uni.setStorageSync('Authorization', res)
						if (this.checkedVal && this.checkedVal.length > 0 && this.checkedVal[0] === '1') {
							let rinfo = {
								checkedVal: ['1'],
								user_name: this.form.user_name,
								pass_word: this.form.pass_word
							}
							let base64Info = Base64.encode(JSON.stringify(rinfo))
							uni.setStorageSync('rinfo', base64Info)
						} else {
							uni.setStorageSync('rinfo', '')
						}
						uni.showToast({
							title: '登录成功',
							icon: 'none',
							duration: 1500
						})
						this.$store.dispatch('set_userinfo').then(res => {
							setTimeout(() => {
								uni.redirectTo({
									url: '/pages/index/index'
								})
							})
						})
					} else {
						uni.showToast({
							title: result.message,
							icon: 'none',
							duration: 1500
						})
					}
				})

			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #FFFFFF;
		/deep/ .u-popup__content{
			background: transparent;
		}
	}

	.login-bg {
		height: 100vh;
		width: 100%;
		background: url("../../static/images/login/login-bg.png") 100% 100%;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		display: flex;
		align-items: center;
		justify-content: center;

		.login-content {
			width: 375px;
			min-height: 468px;
			padding-bottom: 20px;
			background: #FFFFFF;
			box-shadow: 0px 2px 8px 0px rgba(48, 51, 59, 0.1);
			border-radius: 8px;

			.login-logo {
				text-align: center;
				margin-top: 64px;
			}

			.login-center {
				margin-top: 21px;
				width: 100%;
				padding: 0 54px;
				box-sizing: border-box;

				.login-input-li {
					width: 100%;
					margin-bottom: 20px;
					box-sizing: border-box;

					.login-input-title {
						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #646A74;
						line-height: 20px;
						margin-bottom: 8px;
					}



					.login-input-inner {
						// width: calc(268rpx * 2);
						width: 100%;
						height: 36px;
						background: #FFFFFF;
						border-radius: 2px;
						border: 1px solid #E7EAEF;
						padding: 8px;
						box-sizing: border-box;
						font-size: 14px;
						-webkit-appearance: none;/*去除阴影边框*/
						outline: none;
						-webkit-tap-highlight-color: rgba(0,0,0,0);/*点击高亮的颜色*/
						box-shadow: none !important;
						-webkit-user-select: auto;  // 解决输入问题；
					}

					.login-input-out {
						position: relative;
						box-shadow: none !important;
						::-webkit-input-placeholder {
							/* Chrome/Opera/Safari */
							color: #BFC7D5;
							font-size: 14px;
						}

						::-moz-placeholder {
							/* Firefox 19+ */
							color: #BFC7D5;
							font-size: 14px;
						}

						:-ms-input-placeholder {
							/* IE 10+ */
							color: #BFC7D5;
							font-size: 14px;
						}

						:-moz-placeholder {
							/* Firefox 18- */
							color: #BFC7D5;
							font-size: 14px;
						}

					}

					.pwd-eyes-icon {
						position: absolute;
						top: calc(50% - 6px);
						right: 10px;
						width: 12px;
						height: 12px;
						cursor: pointer;
					}

				}

				.login-btn {
					width: 100%;
					box-sizing: border-box;
					height: 36px;
					background: #26bbff;
					border-radius: 2px;
					margin-top: 40px;
					font-size: 14px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 36px;
					border: none;
					cursor: pointer;
				}

				.login-btn:active {
					opacity: .5;
				}
			}
		}
	}
	
	.login-register{
		margin-top: 36rpx;
	}
	

	@media screen and (min-width: 0px) and (max-width:1024px) {
		.login-bg {
			background: none;

			.login-content {
				background: none;
				box-shadow: none;

				.login-logo {}

				.login-center {
					padding: 0 40px;

					.login-input-li {

						.login-input-title {}

						.login-input-inner {}

					}

					.login-btn {}
				}
			}
		}
	}
</style>
